<template>
	<view>
		<view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/circlePages/business')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
				园区资讯
			</view>
			<view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
				<text class="tn-padding-xs" @click="onList">全部</text>
				<text class="tn-icon-topics"></text>
			</view>
		</view>
		<swiper class="card-swiper2 tn-margin-top-sm" :circular="true" :autoplay="false" duration="500" interval="5000"
			@change="resume">
			<swiper-item v-for="(item,index) in resumeList" :key="index" :class="cardCur2==index?'cur':''"
				@click="nav(item)">
				<view class="item tn-shadow-blur"
				style="border-radius: 15rpx;">
					<view class="swiper-item1 image-banner"
						:style="'background-image:url('+ item.cover + ');width: 450rpx;height: 300rpx;background-size: cover;'">
					</view>
					<view class="tn-text-lg tn-margin-top-sm tn-text-ellipsis-2"
					style="width: 450rpx;">{{item.title}}</view>
				</view>
		
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		Getnews,
	} from '@/api/consultation/index'
	export default{
	    data(){
			return{
				cardCur2:0,
				resumeList:[]
			}
		},
	  mounted() {
	  	//咨询
	  	this.getcarousel()
	  },
		methods:{
		// 跳转
		nav(e) {
			uni.navigateTo({
				url: `/subcontract/consultation/details?id=${e.id}`,
			});
		},
		onList(){
			uni.navigateTo({
				url: `/subcontract/consultation/index`,
			});
		},
		// resume
		resume(e) {
			this.cardCur2 = e.detail.current
		},
		getcarousel() {
			let param = {
				pageable: 0
			}
			Getnews(param).then((res) => {
				this.resumeList = res.data
			})
		},
		}
	}
</script>

<style lang="scss" scoped>
	/* 简历推荐 start */
	.card-swiper2 {
		height: 450rpx !important;
		overflow: hidden;
	}
	
	.card-swiper2 swiper-item {
		width: 450rpx !important;
		height: 450rpx;
		left: 30rpx;
		box-sizing: border-box;
		overflow: initial;
		padding: 0 0rpx 40rpx 0;
	}
	.card-swiper2 swiper-item .item{
		width: 450rpx;
		height: 450rpx;
	}
	.card-swiper2 swiper-item .swiper-item1 {
		width: 450rpx;
		display: block;
		height: 250rpx;
		transform: scale(0.97);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		background-color: #E7FAFE;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item1 {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 50%;
		transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}
	
	.card-swiper2 swiper-item .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}
	
	.card-swiper2 swiper-item.cur .swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}
	
</style>